<template>
    <div id="roll-call-teac">
        <div class="breadcrumb">
            <img src="../../../../static/img/campus_icon_1.png" class="head_img">
            <span class="title">课堂点名</span>
        </div>

        <div class="search">
            <el-select v-model="semester" @change="getClasses">
                <el-option v-for='item in semesters' :label='item.semesterName' :value='item.sid' :key="item.sid">
                </el-option>
            </el-select>
            <el-select v-model="teacher" @change="getClasses" v-if="user.type !==3" filterable>
                <el-option label="全部老师" value='0'></el-option>
                <el-option v-for='item in teachers' :label='item.teacherName' :value='item.mid' :key="item.mid">
                </el-option>
            </el-select>
            <el-select v-model="course">
                <el-option label="全部课程" value='0'></el-option>
                <el-option v-for='item in courses' :label='item.name' :value='item.cid' :key="item.cid">
                </el-option>
            </el-select>
            <el-button class="sel_btn" type="primary" @click="select">筛选</el-button>
        </div>

        <div class="list">
            <div class="list_head">
                <span class="head_name">课堂点名</span>
                <el-button class="cancel" type="primary" @click="importData" v-if="teacher != '0'">导出</el-button>
            </div>
            <el-table :data="list" @row-click="toStuList">
                <el-table-column prop="className" label="课程">
                </el-table-column>
                <el-table-column prop="teacher" label="教师">
                </el-table-column>
                <el-table-column prop="rollCallNum" label="点名次数">
                </el-table-column>
                <el-table-column prop="studentNum" label="课程人数">
                </el-table-column>
                <el-table-column prop="attendancePer" label="出勤率">
                </el-table-column>
                <el-table-column prop="absencePer" label="缺勤率">
                </el-table-column>
                <el-table-column prop="leavePer" label="请假率">
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination v-show="this.totalCount" layout="prev, pager, next, jumper" :page-size="10" :current-page="currentPage" :total="totalCount"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                list: [],
                courses: [],
                teachers: [],
                semesters: [],
                semester: "",
                teacher: "0",
                totalCount: 0,
                course: this.$util.getUrlParam("cid") || "0",
                currentPage: this.$util.getUrlParam("pageNum") * 1 || 1
            };
        },
        mounted() {
            this.clearStorage();
            if (this.user.type == 3) {
                this.teacher = this.user.mid;
            } else {
                this.getTeachers();
            }
            this.getSemesters();
        },
        computed: mapState({ user: state => state.user }),
        methods: {
            //学期列表
            getSemesters() {
                let url = this.$util.domain + "/campusadminapi/v1/tools/semesters";

                this.$http({
                    url,
                    method: "GET"
                }).then(response => {
                    if (response.data.error == 10000) {
                        let semesterList = response.data.data;
                        if (semesterList && semesterList.length) {
                            let now = new Date().getTime();
                            this.semester = semesterList[0].sid;

                            for (let i = 0; i < semesterList.length; i++) {
                                if (now <= semesterList[i].endDate && now >= semesterList[i].startDate) {
                                    this.semester = semesterList[i].sid;
                                }

                                this.semesters.push({
                                    sid: semesterList[i].sid,
                                    unids: semesterList[i].unids,
                                    endDate: semesterList[i].endDate,
                                    startDate: semesterList[i].startDate,
                                    semesterName: semesterList[i].semesterName
                                });
                            }

                            if (this.$util.getUrlParam("sid")) {
                                this.semester = this.$util.getUrlParam("sid") * 1;
                            }
                            this.getList();
                        }
                    }
                });
            },
            //教师列表,
            getTeachers() {
                let url = this.$util.domain + "/campusadminapi/v1/tools/teachers";

                this.$http({
                    url,
                    method: "GET"
                }).then(response => {
                    if (response.data.error == 10000) {
                        let teacherList = response.data.data;
                        if (teacherList && teacherList.length) {
                            for (let i = 0; i < teacherList.length; i++) {
                                this.teachers.push({
                                    mid: teacherList[i].mid,
                                    teacherName: teacherList[i].teacherName
                                });
                            }

                            if (this.$util.getUrlParam("mid") && this.$util.getUrlParam("mid") != "0") {
                                this.teacher = this.$util.getUrlParam("mid") * 1;
                            }
                        }
                    }
                });
            },
            getClasses() {
                this.courses = [];
                let url = this.$util.domain + "/campusadminapi/v1/tools/classes";
                if (this.teacher == "0") {
                    this.course = "0";
                    return;
                }
                this.$http({
                    url,
                    method: "GET",
                    params: {
                        mid: this.teacher,
                        sid: this.semester
                    }
                }).then(response => {
                    if (response.data.error == 10000) {
                        let coursesList = response.data.data;
                        this.courses = [];

                        if (coursesList && coursesList.length) {
                            for (let i = 0; i < coursesList.length; i++) {
                                this.courses.push({
                                    cid: coursesList[i].id,
                                    name: coursesList[i].name
                                });
                            }
                        }
                        this.course = "0";
                    }
                });
            },
            select() {
                this.handleCurrentChange(1);
            },
            //获取点名列表
            getList() {
                this.list = [];
                let url = this.$util.domain + "/campusadminapi/v2/rollcall/teacher/list";
                this.$http({
                    url,
                    method: "POST",
                    body: JSON.stringify({
                        pageSize: 10,
                        mid: this.teacher * 1,
                        sid: this.semester * 1,
                        cid: this.course * 1,
                        pageNum: this.currentPage
                    })
                }).then(response => {
                    this.list = [];
                    if (response.data.error == 10000) {
                        let list = response.data.data.list;
                        this.totalCount = response.data.data.total;

                        if (list && list.length) {
                            list.forEach(item => {
                                this.list.push({
                                    cid: item.cid,
                                    mid: item.mid,
                                    className: item.className,
                                    studentNum: item.studentNum,
                                    rollCallNum: item.rollCallNum,
                                    teacher: item.teacher,
                                    leavePer: item.leavePer,
                                    absencePer: item.absencePer,
                                    attendancePer: item.attendancePer
                                })
                            });
                        }
                    } else {
                        this.$util.errorMsg(response.data.message);
                    }

                });
            },
            //请求分页数据
            handleCurrentChange(val) {
                if (this.semesters.length > 0) {
                    this.currentPage = val;
                    this.getList();
                }
            },
            //跳转学生详情
            toStuList(item) {
                let params = {
                    mid: this.teacher,
                    sid: this.semester,
                    cid: this.course,
                    pageNum: this.currentPage
                };
                this.$util.setStore("cid", item.cid);
                this.$util.setStore("mid", item.mid);
                this.$util.setStore("teacher", item.teacher);
                this.$util.setStore("className", item.className);
                this.$util.setStore("studentNum", item.studentNum);
                this.$util.setStore("rollCallNum", item.rollCallNum);
                this.$util.refreshTo("/#/stuList", params);
            },
            //导出
            importData() {
                let url = this.$util.domain + "/campusadminapi/v2/rollcall/exportdetail";

                this.$http({
                    url,
                    method: "POST",
                    body: JSON.stringify({
                        cid: this.course * 1,
                        mid: this.teacher * 1,
                        sid: this.semester * 1
                    })
                }).then(response => {
                    if (response.data.error == 10000) {
                        location.href = response.data.data.url;
                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                });
            },
            //清除localStorage
            clearStorage() {
                let removeArr = ["cid", "mid", "uid", "name", "teacher", "campusId", "className", "studentNum", "rollCallNum"];
                this.$util.removeStore(removeArr);
            }
        }
    };
</script>

<style>
    #roll-call-teac {
        padding-top: 80px;
        height: calc(100% - 80px);
    }

    #roll-call-teac .list {
        height: calc(100% - 30px);
    }

    #roll-call-teac .search {
        margin: 20px 30px;
        background: #ffffff;
        border-radius: 2px;
        height: 60px;
        line-height: 60px;
        padding: 0 25px;
    }

    .sel_btn {
        position: absolute;
        right: 55px;
        margin-top: 12px;
    }

    #roll-call-teac .qizhiDate {
        width: 100%;
    }

    #roll-call-teac .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #f7fcff;
        cursor: pointer;
    }
</style>